<template>
  <h1>watch函数监听</h1>
  <ul>
    <li>{{ count }}</li>
    <li>{{ name }}</li>
    <li>{{ obj }}</li>
  </ul>
  <hr />
  <p>
    <button @click="count++">增加一</button>
    <button @click="name = '小强'">改变姓名</button>
    <button @click="obj.age = Math.random() * 100">改变年龄</button>
  </p>
</template>

<script>
import { ref, watch } from 'vue'
export default {
  setup () {
    /**
 * **使用步骤**
1. 从vue框架中导入`watch`函数
2. 在setup函数中执行watch函数开启对响应式数据的监听
写法：watch(callback指定监听变量, callback被监听变量发生变化执行,options配置)
3. watch函数接收三个常规参数
   1. 第一个参数为函数，返回你要监听变化的响应式数据
   2. 第二个参数为响应式数据变化之后要执行的回调函数
   3. 第三个参数为一个对象，在里面配置是否开启立刻执行或者深度监听
 */
    const count = ref(0)
    const name = ref('小红')
    // 监听属性 简单监听
    watch([count, name], (newvalue, old) => {
      console.log('新值和旧值', newvalue, old)
    })
    // 复杂监听
    const obj = ref({ name: '小连', age: 18 })
    watch(obj, (newvalue, old) => {
      console.log('年龄变化', newvalue, old)
    }, {
      deep: true,
      immediate: true
    }
    )
    return { count, name, obj }
  }
}
</script>

<style lang="scss" scoped>
</style>
